import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/advanced/scaffold_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

import '../../conf/app_themes.dart';

class AppPage extends PageWithTitle {
  const AppPage() : super("App组件(WidgetsApp)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return [
      const PrimaryTitle("简介"),
      const BodyText("App全局设置"),
      AppSpacer.large,
      const UlItem("WidgetsApp"),
      const BodyText("应用组件，用于设置页面导航、路由、地区、快捷方式、action页面映射等，"
          "但我们一般不用这个，因为它只能设置应用主色调，而我们通常采用Material设计。"),
      AppSpacer.large,
      Row(
        children: [
          MaterialApp(
            debugShowCheckedModeBanner: false,
            theme: AppThemeWithCustomColor.light,
            darkTheme: AppThemeWithCustomColor.dark,
            themeMode: ThemeMode.light,
            home: const ScaffoldExample(),
          ),
          MaterialApp(
            debugShowCheckedModeBanner: false,
            theme: AppThemeWithCustomColor.light,
            darkTheme: AppThemeWithCustomColor.dark,
            themeMode: ThemeMode.dark,
            home: const ScaffoldExample(),
          ),
        ],
      ),
      AppSpacer.mini,
      const UlItem("MaterialApp"),
      const BodyText("Material应用，在Android上以材料设计为主，他基于WidgetsApp进行封装"
          "，提供一整套颜色定义和组件样式定义，均提供了默认值，开发者可以快速覆盖目标属性定制样"
          "式，对应的flutter也提供了大量的采用Material样式的组件。"),
      const NoticeText("MaterialApp 对其下的所有组件都会有样式上的影响，我们一般在最上层的"
          "组件套一层MaterialApp即可全局起效，但有的时候需要在应用中单独的页面使用另外的主题样"
          "式，也可以再次嵌套一层MaterialApp来指定新的样式"),

      AppSpacer.large,
      const UlItem("CupertinoApp"),
      const BodyText("Ios应用的设计风格，由于我没接触过ios原生，不清楚这个，一般也不建议一个"
          "应用使用两种设计风格，flutter提供的Cupertino组件比较少"),
    ];
  }
}
